import { Component, OnChanges, Input } from '@angular/core';
import { EChartOption } from 'echarts';
@Component({
    selector: 'itmp-vehicle-flow',
    templateUrl: './vehicle-flow.component.html',
    styleUrls: ['./vehicle-flow.component.css']
})
export class VehicleFlowComponent implements OnChanges {
    options: EChartOption;
    @Input() data: any;
    @Input() titletext: String;

    constructor() {}

    ngOnChanges() {
        if (!this.data) {
            return;
        }
        this.options = {
            backgroundColor: '#363a70', //背景色
            legend: {
                orient: 'vertical',
                right: 0,
                top: 20,
                itemGap: 10,
                width: 20,
                textStyle: {
                    fontSize: 10,
                    color: '#ffffff' //图例颜色
                }
                // data: ['Smooth', 'Jam', 'Heavy']
            },
            tooltip: {
                formatter: '{b}: {c} / {d}%'
            },
            xAxis: {
                axisLabel: {
                    show: true,
                    textStyle: {
                        //x轴座标文字颜色
                        color: '#fff'
                    }
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#fff', //左边线的颜色
                        width: '0' //坐标线的宽度
                    }
                }
            },
            yAxis: {
                axisLabel: {
                    show: true,
                    textStyle: {
                        //轴座标文字颜色
                        color: '#fff'
                    }
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#fff', //左边线的颜色
                        width: '0' //坐标线的宽度
                    }
                }
            },
            color: ['#FDD158', '#6792F5', '#3D95E7', '#B3D465', '#F39800', '#71B5F4'],
            series: [
                {
                    type: 'pie',
                    left: 0,
                    top: -40,
                    radius: ['10%', '40%'],
                    center: ['30%', '60%'],
                    data: this.data,
                    label: {
                        formatter: '{d}%'
                    },
                    labelLine: {
                        length: 5,
                        length2: 5
                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
                /*{
                    type: 'pie',
                    radius: ['25%', '35%'],
                    center: ['30%', '60%'],
                    hoverAnimation: false,
                    data: [1],
                    itemStyle: {
                        color: 'rgba(63, 63, 63, 0.2)'
                    },
                    labelLine: {
                        show: false
                    },
                    tooltip: {
                        show: false
                    }
                }*/
            ]
        } as EChartOption;
    }
}
